<template>
  <div class="main">
    <div>
      <van-nav-bar
        title="个人信息"
        fixed
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="personal">
      <van-cell-group inset>
        <van-cell
          name="username"
          title="用户名"
          :value="data.username"
          size="large"
        />
      </van-cell-group>
      <van-cell-group style="margin-top: 3px" inset>
        <van-cell name="sex" :value="data.sex" title="性别" size="large" />
      </van-cell-group>
      <van-cell-group style="margin-top: 3px" inset>
        <van-cell name="email" :value="data.email" title="邮箱" size="large" />
      </van-cell-group>
      <van-cell-group style="margin-top: 3px" inset>
        <van-cell name="phone" :value="data.phone" title="电话" size="large" />
      </van-cell-group>
      <van-cell-group style="margin-top: 3px" inset>
        <van-cell name="num" :value="data.num" title="借阅总数" size="large" />
      </van-cell-group>
    </div>
    <div class="update">
      <van-button block type="success" round @click="update"
        >修改信息</van-button
      >
      <van-button
        block
        style="margin-top: 16px"
        type="success"
        round
        @click="password"
        >修改密码</van-button
      >
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { getByUsername } from "@/api/api";
export default {
  data() {
    return {
      active: 3,
      data: {
        username: "admin",
        sex: "男",
        phone: "12345",
        email: "123@qq.com",
        num: "3",
      },
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    update() {
      this.$router.push({
        name: "update",
      });
    },
    password() {
      this.$router.push({
        name: "password",
      });
    },
  },
  created() {
    getByUsername({ username: localStorage.getItem("username") }).then(
      (res) => {
        if (res.sex == "1") {
          res.sex = "男";
        } else {
          res.sex = "女";
        }
        this.data = res;
      }
    );
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.personal {
  margin-top: 15%;
}
.update {
  text-align: center;
  margin-top: 8%;
}
</style>
